<!--
 * @Description: 文件描述
 * @Author: 程前
 * @Date: 2024-12-13 15:48:12
 * @LastEditors: 程前
 * @LastEditTime: 2024-12-26 15:47:20
-->
<template>
    <div class="config-panel-model">
        <div class="config-item">
            <div class="config-item-label">名称</div>
            <div class="config-item-value"> <el-input v-model="configData.label" />
            </div>
        </div>
        <div class="config-item">
            <el-color-picker v-model="configData.labelColor" />
        </div>
        <div class="config-item">
            <div class="config-item-label">大小</div>
            <div class="config-item-value"> <el-input-number v-model="configData.pixel" :min="0" :max="256" controls-position="right">
                    <template #suffix>
                        <span>px</span>
                    </template>
                </el-input-number>
            </div>
        </div>
        <div class="config-item">
            <div class="config-item-label">缩放</div>
            <div class="config-item-value"> <el-input-number v-model="configData.scale" controls-position="right" />
            </div>
        </div>
        <div class="config-item">
            <div class="config-item-label">x轴旋转</div>
            <div class="config-item-value"> <el-input-number v-model="configData.rotation" controls-position="right">
                    <template #suffix>
                        <span>°</span>
                    </template>
                </el-input-number>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onBeforeMount, ref, onUnmounted } from "vue";
import { eventBus } from "@/utils"
import { useCesiumEditStore } from "@/store/modules/cesium-edit"

/**
 * 初始化数据
 */
const cesiumEditStore = useCesiumEditStore()


// const configData = ref<any>({
//     label: '标记点',
//     color: "",
//     size: 0,
//     scale: 0,
//     rotation: 0
// })


/**
 * 初始化配置
 */
const configData = ref<any>({})
onBeforeMount(() => {
    eventBus.on('edit-config-model', (data: any) => {
        configData.value = cesiumEditStore.model.config
    })
})

/**
 * 卸载监听
 */
onUnmounted(() => {
    eventBus.off('edit-config-model')
})
</script>



<style lang="less" scoped>
.config-panel-model {
    display: flex;
    // width: 800px;
    height: 100%;
    background-color: #fff;
    border-radius: 6px;
    padding: 1px 12px;

    .config-item {
        display: flex;
        align-items: center;
        margin-right: 12px;

        &-label {
            color: #000;
            margin-right: 12px;
        }
    }
}

.el-input {
    width: 120px;
}

.el-input-number {
    width: 110px;
}
</style>
